import React, { Component } from 'react';
import { Row } from 'antd';
import { connect } from 'dva';

import { SolveDetailCol, SolveDetail, Line, SovleDataUl, SovleDataLi } from './Styled';
import ShowItem from './ShowItem';
import Imgviewer from '@/components/ImgViewer';

const depart = ['保安组', '消防主管', '工程部', '管理员', '消防责任人']

@connect(({ alias }) => ({
  alias,
}))
class Sovled extends Component {
  state = {
    src: "",
    showImg: false
  };

  handleCancel = e => {
    this.setState({
      showImg: false
    });
  };

  showImg(src) {
    this.setState({
      src,
      showImg: true,
    })
  }

  componentDidMount() {

  }

  render() {
    const { data = {}, analyse = false } = this.props;
    const logs = data.pushLogList || [];
    const images = data.attach || [];
    return (
      <section>
        <SolveDetail>
          <SolveDetailCol analyse={analyse.toString()}>{`发生${data.typeName}`}
          </SolveDetailCol>
          {
            depart.map((item, index) => (
              <span key={index}>
                <Line analyse={analyse.toString()} width="50px" />
                <SolveDetailCol analyse={analyse.toString()} width="90px">
                  {`${data.typeName}信息推送至${item}: `}
                  {logs[index] && logs[index] && logs[index].receiverName && logs[index].receiverName[0] ? `${logs[index].receiverName[0] || ''}等` : <span>暂无</span>}
                </SolveDetailCol>
              </span>
            ))
          }
          <Line analyse={analyse.toString()} width="50px" />
          <SolveDetailCol analyse={analyse.toString()}>报警处理</SolveDetailCol>
          <Line analyse={analyse.toString()} width="50px" />
          <SolveDetailCol analyse={analyse.toString()}>结束</SolveDetailCol>
        </SolveDetail>
        <SovleDataUl>
          <SovleDataUl style={{ marginLeft: '-23px' }}>
            <SovleDataLi width="100px" style={{ marginRight: '23px' }}>
              {data.createTime}
              <p>
              {
                Array.isArray(data.file) && data.file.map((it, index) => <Imgviewer key={index} isThumb={true} url={it} />)
              }
              </p>
            </SovleDataLi>
            {
              logs && logs.filter((it, index) => index < 6).map((item, index) => (
                <SovleDataLi key={index} width="100px" style={{ marginRight: '60px' }}>
                  <p>{item.createTime}</p>
                  <p>{item.statusName}</p>

                </SovleDataLi>
              ))
            }
            <SovleDataLi width={+data.type === 1 ? '180px' : '120px' }>
              <Row>处理方式: {+data.type === 1 ? data.handleAlarmStyleName : data.handleFaultStyleName }</Row>
              <Row>处理人: {+data.type === 3 && +data.handleFaultStyle === 2 ? data.maintenance : data.handlerName || '/'}</Row>
              <Row>{`${data.typeName}`}原因: {+data.type === 1 ? data.faultReasonName : data.malfunctionReasonName }</Row>
              <Row>现场照片: </Row>
              <Row>
                {
                  images && images.map((it, index) => <Imgviewer key={index} isThumb={true} thumbWidth="30px" hasText="查看图片" missText="暂无图片" url={it} />)
                }
              </Row>
            </SovleDataLi>
          </SovleDataUl>

          <SovleDataLi width={+data.type === 1 ? '120px' : '100px'}>{data.lastTime}</SovleDataLi>
        </SovleDataUl>
      </section>
    );
  }
}

export default ShowItem(Sovled);
